<template>
  <view>
    <view class="cart-container" v-if="cart.length">
      <!-- 收货地址管理区域 -->
      <view class="address">
        <my-address></my-address>
      </view>
      <!-- 购物车数据展示区 -->
      <view class="cart">
        <!-- 购物车商品列表的标题区域 -->
        <view class="cart-title">
          <!-- 左侧的图标 -->
          <uni-icons type="shop" size="18"></uni-icons>
          <!-- 描述文本 -->
          <text class="cart-title-text">购物车</text>
        </view>
        <!-- 购物车列表 -->
        <uni-swipe-action class="cart-list">
          <block v-for="(goods, i) in cart" :key="i">
            <uni-swipe-action-item :right-options="options" @click="swipeActionClickHandler(goods)">
              <!-- 要显示单选框 -->
              <my-goods :goods="goods" show-radio showNum @change-goods-state="changeGoodsStateHandle" @change-goods-count="changeGoodsCountHandle"></my-goods>
            </uni-swipe-action-item>
          </block>
        </uni-swipe-action>
      </view>
    </view>
    <!-- 空白购物车区域 -->
    <view class="empty-cart" v-else>
      <navigator class="tip" open-type="switchTab" url="/pages/home/home">
        <image src="/static/cart_empty@2x.png" class="empty-img"></image>
        <!-- 去往首页选择新的商品添加到购物车中 -->
        <text class="tip-text">去逛逛</text>
      </navigator>
    </view>
    <!-- 结算组件 -->
    <my-settle @set-badge="setBadge"></my-settle>
  </view>
</template>

<script>
import setBadge from '@/mixins/tabbar-badge.js';
import { mapState, mapActions } from 'vuex';
export default {
  mixins: [setBadge],
  data() {
    return {
      // 设置右侧滑块的文字的配置项
      options: [
        {
          text: '删除', // 显示的文本内容
          style: {
            backgroundColor: '#C00000' // 按钮的背景颜色
          }
        }
      ]
    };
  },
  computed: {
    // 从vuex中获取购物车数据
    ...mapState('cart', ['cart'])
  },
  methods: {
    ...mapActions('cart', ['updateGoodsStateAsync', 'updateGoodsCountAsync', 'delGoodsAsync']),
    // 更改购物车商品的选中状态
    async changeGoodsStateHandle(goods) {
      // 去vuex中修改购物车数据
      await this.updateGoodsStateAsync(goods);
      // 改变数字徽标
      // this.setBadge();
    },
    // 去vuex中修改购物车数据
    async changeGoodsCountHandle(goods) {
      // 去vuex中修改购物车数据
      await this.updateGoodsCountAsync(goods);
      // 改变数字徽标
      // this.setBadge();
    },
    // 点击滑块按钮触发事件
    swipeActionClickHandler(goods) {
      uni.showModal({
        title: '删除商品',
        content: '您确定要删除该商品吗?',
        success: async (res) => {
          if (res.confirm) {
            // 调用vuex中删除数据的action方法
            await this.delGoodsAsync(goods);
            // 改变数字徽标
            // this.setBadge();
          }
        }
      });
    }
  }
};
</script>

<style lang="scss">
.cart-container {
  // 设置底部padding不被结算区域覆盖
  padding-bottom: 50px;
  // 收货地址管理
  .address {
  }
  // 购物车
  .cart {
    // 购物车标题
    .cart-title {
      height: 40px;
      display: flex;
      align-items: center;
      font-size: 14px;
      padding-left: 5px;
      border-bottom: 1px solid #efefef;
      .cart-title-text {
        margin-left: 10px;
      }
    }
    // 购物车列表
  }
}
.empty-cart {
  padding-top: 150px;
  .tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    .empty-img {
      width: 90px;
      height: 90px;
    }

    .tip-text {
      font-size: 16px;
      color: gray;
      margin-top: 15px;
    }
  }
}
</style>
